{layout name="layout/header" /}
<div id="app">
    <div class="wrapper j_vote">
        <div class="banner">
            <!--banner图-->
            <img :src="banner">
            <!--投票时间投票规则-->
            <div class="date-rules">
                <span class="date">投票时间：{$vote.start_time}—{$vote.end_time}</span>
                <span class="rules-btn" id="j-call-rules">活动规则</span>
            </div>
        </div>
        <!--<div>-->
        <!--用户剩余票数-->
        <!--<span id="j_vote_left">0</span>-->
        <!--</div>-->
        <!-- 主区域-->
        <div class="content" >
            <!--tab & search-->
            <div class="search-area clear">
                <!-- 搜索区-->
                <div class="search">
                    <input class="search-input j_search_input" placeholder="搜索名字" v-model="keyword">
                    <span class="search-btn j_search" @click="search()">搜索</span>
                </div>

                <div class="tab">
                    <span class="current j_reload" @click="reload()">我要点赞</span>
                    <span class="j_rank" @click="rank()">人气排行</span>
                </div>

            </div>
            <!-- 选手们-->
            <div class="main-content j_acitvity clear" >
                <div class="item" v-for="i in list">
                    <!--<span class="item-order">Top1</span>-->

                    <div class="bg-gray">
                        <a @click="toInfo(i.id)">
                            <div class="img-area">
                                <img :src="i.head_img">
                            </div>
                        </a>
                        <i class="iplay"></i>
                        <div class="txt-area clear">
                            <p class="name">
                                <a>{{i.name}}</a>
                            </p>
                            <p class="info">编号:{i.mid}}</p>
                        </div>
                    </div>

                    <p class="ticket">票数:<span class="now-ticket j_now">{{i.total}}</span></p>

                    <div class="vote-btn j_vote_btn" @click="vote(i.id,i)">
                        投票
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--活动规则提示弹窗-->
    <div class="popup rules-popup hide" id="j-rules">
        <div class="popup_card test2">
            <div class="popup_close j-pclose"></div>
            <div class="popup_rule">
                <div class="popup_title">活动规则</div>
                <div class="popup_content">
                    {$vote.info}
                </div>
            </div>
        </div>
    </div>

</div>


<script>
    new Vue({
        el:"#app",
        data:{
            vote_id:"{$vote.id}",
            banner:"{$banner}",
            all:[],
            list:[],
            keyword:'',
            type_id:"{$type_id}",
            // page:1,
            // limit:30,
            // enablePage:false,
        },
        created:function(){
            this.getList();
            this.checkIsApp();
        },
        methods:{
            //投票
            vote:function (item_id,i) {

                var _this =this;
                $.post("{:url('vote', ['site' => $site_id])}",{vote_id:this.vote_id,item_id:item_id},function (res) {
                    console.log(res);
                    if(res.code){
                        layer.open({
                            content: res.msg
                            ,skin: 'msg'
                            ,time: 2
                        })
                    }else {
                        i.total += res.data.add
                    }
                },'json')

            },
            //排行
            rank:function () {
                $('.j_rank').addClass('current');
                $('.j_reload').removeClass('current');
                this.getList('top');
            },
            //搜索
            search:function () {
                console.log('search');
                this.getList('',this.keyword)
            },
            //刷新
            reload:function () {
                $('.j_reload').addClass('current');
                $('.j_rank').removeClass('current');
                this.getList();
            },
            //跳转到详情页
            toInfo:function(item_id){
                window.location.href="{:url('detail', ['site' => $site_id])}"+"/item_id/"+item_id
            },
            //获取数据
            getList:function (order = '',keyword = '') {
                var _this = this;
                $.post("{:url('getList', ['site' => $site_id])}",{vote_id:_this.vote_id,type_id:_this.type_id,order:order,keyword:keyword},function (res) {
                    _this.list = res.data.list
                },'json')
            },
            checkIsApp:function () {
                checkIsApp();
                var ua = navigator.userAgent;
                //不在四川观察内部时，点赞提示弹窗
                if(ua.indexOf('SCGC_UA') > -1){
                    self._loginCheck($this);

                }else {
                    unAppPopup.removeClass('hide');
                }

                // wrapper.delegate('.j_vote_btn','click',function () {
                //     var $this = $(this);
                //
                //     if(ua.indexOf('SCGC_UA') > -1){
                //         self._loginCheck($this);
                //
                //     }else {
                //         unAppPopup.removeClass('hide');
                //     }
                // });
            }
        },
    })
</script>

